<template>
  <div class="border border-style-solid border-gray-100 shadow-lg">
    <div class="header m-2 text-xl">{{ title }}</div>
    <div class="content " @click="$emit('checkTime', '1')">
      <div class="accordion">
        <div class="accordion-header">
          <span @click="itemVisible = !itemVisible"></span>
          <!-- <div class="header-icon">
            <img :src="logo" alt="" width="30" />
          </div> -->
        </div>
        <slot></slot>

        <!-- <Transition name="run">
          <div>123</div>
          <div v-if="itemVisible" class="accordion-content">
            折叠面板内容2312312312312312312
          </div>
        </Transition> -->
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
import logo from '@/assets/icons/svg/logo.svg';
defineProps({
  title: { type: String, default: "" },
  name: { type: String, default: "" }
})
const itemVisible = ref(true)
</script>

<style lang="less" scoped>
@import url("@/styles/index.less");

.accordion {
  .accordion-header {
    display: flex;
    color: @primary-color;
    font-size: 1rem;
    padding: 10px;

    .header-icon {
      float: right;
      width: 30px;
      height: 22px;
      transition: transform .5s;
    }
  }

  // .accordion-header:hover {
  //   background-color: @primary-color;

  //   .header-icon {}
  // }

  .accordion-content {
    padding: 10px;
  }
}

.border {
  flex: 1;
  margin: 4px;
  min-height: 120px;
  display: flex;
  flex-direction: column;

  .header {
    height: 30px;
    font-size: 1.2rem;
    position: relative;
    padding-left: 10px;

    &::before {
      content: "";
      display: block;
      width: 4px;
      height: 4px;
      background-color: @primary-color;
      position: absolute;
      left: 0;
      top: 14px;
      border-radius: 50%;
    }
  }

  .content {
    height: 100%;
  }
}

// 元素开始进入的状态 | 元素离开结束的状态
.run-enter-from,
.run-leave-to {
  opacity: 0;
}

// 元素进入结束的状态 ｜ 元素开始离开的状态。 这里不写也可以！！！！！！
.run-enter-to,
.run-leave-from {
  opacity: 1;
}

// 元素进入 ｜ 结束时，过渡的效果
.run-enter-active,
.run-leave-active {
  // 过渡动画的使用
  transition: opacity 0.5s linear 0s;
}
</style>
